<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<link rel="shortcut icon" href="/favicon.ico">
		<title>论坛-用户登录</title>
		<link href="./dist/css/tabler.min.css?1674944402" rel="stylesheet"/>
		<link rel="stylesheet" href="./dist/css/jquery.toast.css">
	</head>
	<body class="d-flex flex-column">
		<div class="page page-center">
			<div class="container container-normal py-4">
				<div class="row align-items-center g-4">
					<div class="col-lg">
						<div class="container-tight">
							<div class="text-center mb-4">
								<img src="./image/bit-forum-logo01.png" height="50" alt="">
							</div>
							<div class="card card-md">
								<div class="card-body">
									<h2 class="text-center mb-4">用户登录</h2>
									<form id="signInForm" method="get" autocomplete="off" novalidate>
										<div class="mb-3">
											<label class="form-label required">用户名</label>
											<input type="text" class="form-control" placeholder="请输入用户名" autocomplete="off" name="username" id="username">
											<div class="invalid-feedback">用户名不能为空</div>
										</div>
										<div class="mb-2">
											<label class="form-label required">密码</label>
											<div class="input-group input-group-flat">
												<input type="password" class="form-control"  placeholder="请输入密码"  autocomplete="off" name="password" id="password">
												<span class="input-group-text">
													<a href="javascript:void(0);" id="password_a" class="link-secondary" title="显示密码" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
														<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
													</a>
												</span>
												<div class="invalid-feedback">密码不能为空</div>
											</div>
										</div>
										<div class="form-footer">
											<button id="submit" type="button" class="btn btn-primary w-100">登录</button>
										</div>
									</form>
								</div>
							</div>
							<div class="text-center text-muted mt-3">
								还没有注册吗? <a href="./sign-up.html" tabindex="-1">点击注册</a>
							</div>
						</div>
					</div>
					<div class="col-lg d-none d-lg-block">
						<img src="./dist/illustrations/undraw_joyride_hnno.svg" height="300" class="d-block mx-auto" alt="">
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="./dist/js/jquery-3.6.3.min.js"></script>
	<script src="./dist/js/tabler.min.js"></script>
	<script src="./dist/js/jquery.toast.js"></script>
	<script>
		$(function () {
			// 用户名
			let usernameEl = $('#username');
			let passwordEl = $('#password');
			
			// 登录校验
			$('#submit').click(function () {
				let checkForm = true;
				
				// 校验用户名
				if (!usernameEl.val()) {
					usernameEl.addClass('is-invalid');
					checkForm = false;
				}
				
				// 校验密码
				if (!passwordEl.val()) {
					passwordEl.addClass('is-invalid');
					checkForm = false;
				}
			
				// 根据判断结果提交表单
				if (!checkForm) {
					return false;
				}
			
				// 构造数据
				let postData={
					username:usernameEl.val(),
					password:passwordEl.val()
				};
				
				// 发送AJAX请求，成功后跳转到index.html
				$.ajax({
					url:'/user/login',
					type:'POST',
					contentType:'application/x-www-form-urlencoded',
					data:postData,
					success:function(res){
						if(res.code==0){
							location.assign('/index.html');
						}else{
							$.toast({
								heading:'警告',
								text:res.message,
								icon:'warning'
							});
						}
					},
					error:function(){
						$.toast({
							heading:'错误',
							text:'访问出现问题，请与管理员联系',
							icon:'error'
						});
					}
				});
			});
		
			// 表单元单独检验
			$('#username, #password').on('blur', function () {
				if ($(this).val()) {
					$(this).removeClass('is-invalid');
					$(this).addClass('is-valid');
				} else {
					$(this).removeClass('is-valid');
					$(this).addClass('is-invalid');
				}
			});
		
			// 显示密码
			$('#password_a').click(function () {
				if(passwordEl.attr('type') == 'password') {
					passwordEl.attr('type', 'text');
				} else {
					passwordEl.attr('type', 'password');
				}
			});
		});
	</script>
</html>